@charset"utf-8";

*{
    margin: 0;
    padding:0;
}

figure{
    position: relative;
    width: 33.3%;
    height: 400px;
    /* 浮动靠在 */
    float: left;
    /* 多出部分隐藏 */
    overflow: hidden;
}

figure img{
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

/* 英文
opacity	美[oʊˈpæsəti] n.不透明性; 

*/
figure:hover img{
    opacity: 0.5;
}

.view1:hover img{
    /* X轴向正方向移动 */
    transform: translateX(50px);
}

.view1 h2{
    position: absolute;
    top: 60px;
    left: 30px;
    color: aliceblue;
    font-size: 25px;
    /* 字体加粗 */
    font-weight: bolder;
    font-family: "微软雅黑";
    transition: all 1.5s;
}

.view1:hover h2{
    transform: translateX(50px);
}

.view2:hover img{
    transform: translateX(-50px);
}

.view3:hover img{
    transform: translateY(-50px);
}

.view6:hover img{
    transform: scale(1.5);
}

.view7:hover img{
    transform: scale(0.9);
}

.view9:hover img{
    transform: rotate(30deg);
}